<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mustache</title>
</head>
<body>
    <script src="/xuni/bundle.js"></script>
    <div id="container"></div>
    <script>
        var templateStr = `<ol>
            {{#students}}
                <li>
                    <div class="hd">{{name}}的基本信息</div>
                    <div class="bd">
                        <p>姓名：{{name}}</p>
                        <p>姓别：{{sex}}</p>
                        <p>年龄：{{age}}</p>
                    </div>
                    {{name}}的业余爱好是:
                    <ul>
                        {{#hobbies}}
                            <li>{{.}}</li>
                        {{/hobbies}}
                    </ul>
                </li>
            {{/students}}
        <ol>`
        var data = {
            students: [
                {"name": "小明", "age": 12, "sex": "男", "hobbies": ["游泳"]},
                {"name": "小红", "age": 11, "sex": "女", "hobbies": ["唱歌", "跳舞"]},
                {"name": "小强", "age": 13, "sex": "男", "hobbies": ["看书", "学习"]},
            ]
        }

        // 例子2：
        // var templateStr = `<ul>
        //     {{#students}}
        //         <li>
        //             <div class="hd">{{name}}的基本信息</div>
        //             <div class="bd">
        //                 <p>姓名：{{name}}</p>
        //                 <p>姓别：{{sex}}</p>
        //                 <p>年龄：{{age}}</p>
        //             </div>
        //         </li>
        //     {{/students}}
        // <ul>`
        // var data = {
        //     students: [
        //         {"name": "小明", "age": 12, "sex": "男"},
        //         {"name": "小红", "age": 11, "sex": "女"},
        //         {"name": "小强", "age": 13, "sex": "男"},
        //     ]
        // }

        // 例子1:
        // var templateStr = `我喜欢买{{something}}, {{otherthing}}喜欢被我买，内里的属性为{{obj.number}}`
        // var data = {
        //     something: '车',
        //     otherthing: '零食',
        //     obj: {
        //         number: 100
        //     }
        // }
        let domStr = YJD_TemplateEngine.render(templateStr, data)
        console.log(domStr)
        let container = document.getElementById('container')
        container.innerHTML = domStr
    </script>
</body>
</html>